<template>
  <div>
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="24" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" :title="$t('dashboard.analysis.total-sales')" total="某地区农业用地数据">
          <a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <!--          <div>-->
          <!--            <trend flag="up" style="margin-right: 16px;">-->
          <!--              <span slot="term">{{ $t('dashboard.analysis.week') }}</span>-->
          <!--              12%-->
          <!--            </trend>-->
          <!--            <trend flag="down">-->
          <!--              <span slot="term">{{ $t('dashboard.analysis.day') }}</span>-->
          <!--              11%-->
          <!--            </trend>-->
          <!--          </div>-->
          <!--          <template slot="footer">{{ $t('dashboard.analysis.day-sales') }}<span>￥ 234.56</span></template>-->
        </chart-card>
      </a-col>
      <!--      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
              <chart-card :loading="loading" :title="$t('dashboard.analysis.visits')" :total="8846 | NumberFormat">
                <a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
                  <a-icon type="info-circle-o" />
                </a-tooltip>
                <div>
                  <mini-area />
                </div>
                <template slot="footer">{{ $t('dashboard.analysis.day-visits') }}<span> {{ '1234' | NumberFormat }}</span></template>
              </chart-card>
            </a-col>
            <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
              <chart-card :loading="loading" :title="$t('dashboard.analysis.payments')" :total="6560 | NumberFormat">
                <a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
                  <a-icon type="info-circle-o" />
                </a-tooltip>
                <div>
                  <mini-bar />
                </div>
                <template slot="footer">{{ $t('dashboard.analysis.conversion-rate') }} <span>60%</span></template>
              </chart-card>
            </a-col>
            <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
              <chart-card :loading="loading" :title="$t('dashboard.analysis.operational-effect')" total="78%">
                <a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
                  <a-icon type="info-circle-o" />
                </a-tooltip>
                <div>
                  <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" height="8px" />
                </div>
                <template slot="footer">
                  <trend flag="down" style="margin-right: 16px;">
                    <span slot="term">{{ $t('dashboard.analysis.week') }}</span>
                    12%
                  </trend>
                  <trend flag="up">
                    <span slot="term">{{ $t('dashboard.analysis.day') }}</span>
                    80%
                  </trend>
                </template>
              </chart-card>
            </a-col>-->
    </a-row>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <!--              <a>{{ $t('dashboard.analysis.all-day') }}</a>
                            <a>{{ $t('dashboard.analysis.all-week') }}</a>
                            <a>{{ $t('dashboard.analysis.all-month') }}</a>
                            <a>{{ $t('dashboard.analysis.all-year') }}</a>-->
            </div>
<!--            <a-range-picker :style="{width: '256px'}" />-->
            <a>2023年</a>
          </div>
          <a-tab-pane loading="true" :tab="$t('dashboard.analysis.sale')" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <!--                <bar :data="barData" :title="$t('dashboard.analysis.sales-trend')" />-->
                <province-land/>
              </a-col>
              <!--              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                              <rank-list :title="$t('dashboard.analysis.sales-ranking')" :list="rankList"/>
                            </a-col>-->
            </a-row>
          </a-tab-pane>
          <a-tab-pane :tab="$t('dashboard.analysis.visit')" key="2">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <land></land>
              </a-col>
              <!--              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                              <rank-list :title="$t('dashboard.analysis.visits-ranking')" :list="rankList"/>
                            </a-col>-->
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>

    <div class="antd-pro-pages-dashboard-analysis-twoColLayout" :class="!isMobile && 'desktop'">
      <a-row :gutter="24" type="flex" :style="{ marginTop: '24px' }">
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :loading="loading" :bordered="false" :title="$t('dashboard.analysis.online-top-search2')" :style="{ height: '100%' }">
            <a-dropdown :trigger="['click']" placement="bottomLeft" slot="extra">
              <a class="ant-dropdown-link" href="#">
                <a-icon type="ellipsis" />
              </a>
<!--              <a-menu slot="overlay">
                <a-menu-item>
                  <a href="javascript:;">{{ $t('dashboard.analysis.dropdown-option-one') }}</a>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:;">{{ $t('dashboard.analysis.dropdown-option-two') }}</a>
                </a-menu-item>
              </a-menu>-->
            </a-dropdown>
            <!--            <a-row :gutter="68">
                          <a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
                            <number-info :total="12321" :sub-total="17.1">
                              <span slot="subtitle">
                                <span>{{ $t('dashboard.analysis.search-users') }}</span>
                                <a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
                                  <a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
                                </a-tooltip>
                              </span>
                            </number-info>
                            &lt;!&ndash; miniChart &ndash;&gt;
                            <div>
                              <mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" />
                            </div>
                          </a-col>
                          <a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
                            <number-info :total="2.7" :sub-total="26.2" status="down">
                              <span slot="subtitle">
                                <span>{{ $t('dashboard.analysis.per-capita-search') }}</span>
                                <a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
                                  <a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
                                </a-tooltip>
                              </span>
                            </number-info>
                            &lt;!&ndash; miniChart &ndash;&gt;
                            <div>
                              <mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" />
                            </div>
                          </a-col>
                        </a-row>-->
            <land-status-hai-nan/>
<!--            <img src="@/assets/plough.png" style="width: 90vh">-->
            <!--            <div class="ant-table-wrapper">
                          <a-table
                            row-key="index"
                            size="small"
                            :columns="searchTableColumns"
                            :dataSource="searchData"
                            :pagination="{ pageSize: 5 }"
                          >
                            <span slot="range" slot-scope="text, record">
                              <trend :flag="record.status === 0 ? 'up' : 'down'">
                                {{ text }}%
                              </trend>
                            </span>
                          </a-table>
                        </div>-->
          </a-card>
        </a-col>
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card class="antd-pro-pages-dashboard-analysis-salesCard" :loading="loading" :bordered="false" :title="$t('dashboard.analysis.the-proportion-of-sale')" :style="{ height: '100%' }">
            <div slot="extra" style="height: inherit;">
              <!-- style="bottom: 12px;display: inline-block;" -->
              <span class="dashboard-analysis-iconGroup">
                <a-dropdown :trigger="['click']" placement="bottomLeft">
                  <a-icon type="ellipsis" class="ant-dropdown-link" />
<!--                  <a-menu slot="overlay">
&lt;!&ndash;                    <a-menu-item>
                      <a href="javascript:;">{{ $t('dashboard.analysis.dropdown-option-one') }}</a>
                    </a-menu-item>&ndash;&gt;
                    <a-menu-item>
                      <a href="javascript:;">{{ $t('dashboard.analysis.dropdown-option-two') }}</a>
                    </a-menu-item>
                  </a-menu>-->
                </a-dropdown>
              </span>
              <div class="analysis-salesTypeRadio">
                <!--                <a-radio-group defaultValue="a">
                                  <a-radio-button value="a">{{ $t('dashboard.analysis.channel.all') }}</a-radio-button>
                                  <a-radio-button value="b">{{ $t('dashboard.analysis.channel.online') }}</a-radio-button>
                                  <a-radio-button value="c">{{ $t('dashboard.analysis.channel.stores') }}</a-radio-button>
                                </a-radio-group>-->
              </div>

            </div>
            <div>
              <!-- style="width: calc(100% - 240px);" -->
              <div>
                <v-chart :force-fit="true" :height="405" :data="pieData" :scale="pieScale">
                  <v-tooltip :showTitle="false" dataKey="item*percent" />
                  <v-axis />
                  <!-- position="right" :offsetX="-140" -->
                  <v-legend dataKey="item"/>
                  <v-pie position="percent" color="item" :vStyle="pieStyle" />
                  <v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
                </v-chart>
              </div>
              <agricultural-census/>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  RankList,
  Bar,
  Trend,
  NumberInfo,
  MiniSmoothArea
} from '@/components'
import { baseMixin } from '@/store/app-mixin'
import landStatus from '@/views/dashboard/components/landStatus'
import classificationArea from '@/views/dashboard/components/classificationArea'
import classificationAreaHaiNan from '@/views/dashboard/components/classificationAreaHaiNan'
import landStatusHaiKou from '@/views/dashboard/components/landStatusHaiKou'
import land from '@/views/dashboard/components/land'
import provinceLand from '@/views/dashboard/components/provinceLand'
import agriculturalCensus from '@/views/dashboard/components/agriculturalCensus'
import landStatusHaiNan from '@/views/dashboard/components/landStatusHaiNan'
import plough from '@/views/dashboard/components/plough'
const barData = []
const barData2 = []
for (let i = 0; i < 12; i += 1) {
  barData.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200
  })
  barData2.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200
  })
}

const rankList = []
for (let i = 0; i < 7; i++) {
  rankList.push({
    name: '白鹭岛 ' + (i + 1) + ' 号店',
    total: 1234.56 - i * 100
  })
}

const searchUserData = []
for (let i = 0; i < 7; i++) {
  searchUserData.push({
    x: moment().add(i, 'days').format('YYYY-MM-DD'),
    y: Math.ceil(Math.random() * 10)
  })
}
const searchUserScale = [
  {
    dataKey: 'x',
    alias: '时间'
  },
  {
    dataKey: 'y',
    alias: '用户数',
    min: 0,
    max: 10
  }]

const searchData = []
for (let i = 0; i < 50; i += 1) {
  searchData.push({
    index: i + 1,
    keyword: `搜索关键词-${i}`,
    count: Math.floor(Math.random() * 1000),
    range: Math.floor(Math.random() * 100),
    status: Math.floor((Math.random() * 10) % 2)
  })
}

const DataSet = require('@antv/data-set')

const sourceData = []

const pieScale = [{
  dataKey: 'percent',
  min: 0,
  formatter: '.0%'
}]

const dv = new DataSet.View().source(sourceData)
dv.transform({
  type: 'percent',
  field: 'count',
  dimension: 'item',
  as: 'percent'
})
const pieData = dv.rows
export default {
  name: 'Monitor',
  mixins: [baseMixin],
  components: {
    ChartCard: ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    NumberInfo,
    MiniSmoothArea,
    landStatus,
    classificationArea,
    classificationAreaHaiNan,
    landStatusHaiKou,
    land,
    provinceLand,
    agriculturalCensus,
    landStatusHaiNan,
    plough
  },
  data () {
    return {
      loading: true,
      rankList,

      // 搜索用户数
      searchUserData,
      searchUserScale,
      searchData,

      barData,
      barData2,

      //
      pieScale,
      pieData,
      sourceData,
      pieStyle: {
        stroke: '#fff',
        lineWidth: 1
      }
    }
  },
  computed: {
    searchTableColumns () {
      return [
        {
          dataIndex: 'index',
          title: this.$t('dashboard.analysis.table.rank'),
          width: 90
        },
        {
          dataIndex: 'keyword',
          title: this.$t('dashboard.analysis.table.search-keyword')
        },
        {
          dataIndex: 'count',
          title: this.$t('dashboard.analysis.table.users')
        },
        {
          dataIndex: 'range',
          title: this.$t('dashboard.analysis.table.weekly-range'),
          align: 'right',
          sorter: (a, b) => a.range - b.range,
          scopedSlots: { customRender: 'range' }
        }
      ]
    }
  },
  created () {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
  }
}
</script>

<style lang="less" scoped>
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.antd-pro-pages-dashboard-analysis-twoColLayout {
  position: relative;
  display: flex;
  display: block;
  flex-flow: row wrap;
}

.antd-pro-pages-dashboard-analysis-salesCard {
  height: calc(100% - 24px);
  :deep(.ant-card-head) {
    position: relative;
  }
}

.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0,0,0,.45);
    cursor: pointer;
    transition: color .32s;
    color: black;
  }
}
.analysis-salesTypeRadio {
  position: absolute;
  right: 54px;
  bottom: 12px;
}
</style>
